<template>
  <div class="bgc-white">
    <div class="flex process-box pad-t-20 pad-b-30">
      <div :class="activeNum < index ? 'disactive-status flex flex-center' : 'active-status flex flex-center'" v-for="(item,index) in stepList10" v-if="detail.afterSaleType === 10">
        <span class="number-tag font-16 flex flex-center">{{index+1}}</span>
        <span class="mar-l-8">{{item}}</span>
      </div>
      <div :class="activeNum < index ? 'disactive-status flex flex-center' : 'active-status flex flex-center'" v-for="(item,index) in stepList20" v-if="detail.afterSaleType === 20">
        <span class="number-tag font-16 flex flex-center">{{index+1}}</span>
        <span class="mar-l-8">{{item}}</span>
      </div>
    </div>
    <div class="operate-info mar-t-30">
      <span v-for="(item,index) in detail.logList" class="font-16 font-color-3 font-w">
      {{item.createTime}}&nbsp;&nbsp;&nbsp;{{item.operatorContent}}(操作人：{{item.operatorName}})</span>
      <!-- <span class="mar-t-15 font-14 font-color-9">2021-12-12 10:21:23</span> -->
    </div>
    <div class="font-16 mar-t-30 after-sales-info">
      <div>
        <span class="font-color-9">订单编号: </span>
        <span class="font-color-3">{{detail.orderNo}}</span>
      </div>
      <div class="mar-t-8">
        <span class="font-color-9">退款原因: </span>
        <span class="font-color-3">{{detail.afterSaleReason}}</span>
      </div>
      <div class="mar-t-8">
        <span class="font-16 font-color-9">退款金额: </span>
        <span class="red-color font-w">￥{{detail.refundAmount}}</span>
      </div>
      <div class="mar-t-2">
        <span class="font-color-9">退货物流: </span>
        <span class="font-color-3">{{detail.expressName}} {{detail.trackingNo}}</span>
        <el-button type="text" class="font-16">查看物流详情</el-button>
      </div>
      <div class="mar-t-2">
        <span class="font-color-9">补充说明: </span>
        <span class="font-color-3">{{detail.customerRemark}}</span>
      </div>
      <div class="mar-t-8">
        <span class="font-color-9">退款状态: </span>
        <span class="red-color">{{statusText}}</span>
      </div>
      <div class="mar-t-8">
        <span class="font-color-9">处理说明:</span>
        <span>{{detail.enterpriseRemark ? detail.enterpriseRemark : detail.supplierRemark}}</span>
      </div>
      <div class="mar-t-8">
        <span class="font-color-9">照片凭证:</span>
        <img v-for="(image, index) in detail.imageList" :key="index" :src="image.imageUrl" height="50" @click="showImage(image.imageUrl)">
      </div>
    </div>
    
    <el-dialog v-model="imageVisible" width="350px" center>
      <img :src="imageUrl" width="300" />
    </el-dialog>
    
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, watch } from 'vue'

export default defineComponent({
  props: {
    detail: {
      type: Object
    }
  },
  setup(props) {
    const stepList10 = ref(['申请退货', '审核申请', '确认退货', '确认退款', '关闭申请'])
    const stepList20 = ref(['申请退货', '审核申请', , '确认退款', '关闭申请'])
    const activeNum = ref(0)
    const imageVisible = ref(<Boolean>false)
    const imageUrl = ref('')
    const statusText = ref('')
    // 售后状态  -3:系统自动关闭 -2:顾客取消关闭  -1：已拒绝 0：待审核 1：待退货 2：退款中 3：已完成 4：已关闭
    const initActiveNum = (afterSaleStatus) => {
      switch(afterSaleStatus){
        default:
        case 0:
          activeNum.value = 1
          statusText.value = '待审核'
          break
        case 1:
          activeNum.value = 2
          statusText.value = '待退货'
          break
        case 2:
          if (props.detail.afterSaleType === 10) {
            activeNum.value = 3
          } else {
            activeNum.value = 2
          }
          statusText.value = '退款中'
          break
        case 3:
          activeNum.value = 4
          statusText.value = '已完成'
          break
        case 4:
          activeNum.value = 4
          statusText.value = '已关闭'
          break
        case -3:
          activeNum.value = 4
          statusText.value = '系统自动关闭'
          break
        case -2:
          activeNum.value = 4
          statusText.value = '主动取消关闭'
          break
        case -1:
          activeNum.value = 4
          statusText.value = '已拒绝'
          break
      }
    }
    
    onMounted(() => {

    })
    
    watch(() => props.detail.afterSaleStatus, (newVal, oldVal) => {
      initActiveNum(newVal)
    })

    
    // 退货凭证
    const showImage = (url) => {
      imageUrl.value = url
      imageVisible.value = true
    }
    
    return {
      stepList10,
      stepList20,
      activeNum,
      showImage,
      imageVisible,
      imageUrl,
      statusText
    }

  }
})
</script>

<style lang="scss" scoped>
.process-box {
  width: 960px;
  margin: 0 auto;
}
.active-status {
  width: 260px;
  height: 38px;
  background: #182245;
  border: 2px solid #FFFFFF;
  color: #fff;
  .number-tag {
    width: 20px;
    height: 20px;
    background: #FFFFFF;
    border-radius: 50%;
    color: #182245;
  }
}
.disactive-status {
  width: 260px;
  height: 38px;
  background: #CCCCCC;
  border: 2px solid #FFFFFF;
  color: #fff;
  .number-tag {
    width: 20px;
    height: 20px;
    background: #FFFFFF;
    border-radius: 50%;
    color: #CCCCCC;
  }
}
.operate-info {
  width: 1140px;
  height: 92px;
  background: #fafafa;
  margin: 0 auto;
  padding-left: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.after-sales-info {
  padding-left: 110px;
  padding-bottom: 30px;
}
.red-color {
  color: #FF5252;
}
</style>
